<template>
  <div class="app-container">
    <el-form :model="postForm" :rules="rules" ref="postForm" label-width="150px" style="width: 80%;">
      <el-form-item label="原密码" prop="oldPwd">
        <el-input v-model="postForm.oldPwd" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input v-model="postForm.newPwd" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码确认" prop="confirmPwd">
        <el-input v-model="postForm.confirmPwd" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="loading" type="primary" @click="onSubmit">确认修改</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

    import { changePwd } from '@/api/login';

    export default {
        data() {
            const validateConfirmPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.postForm.newPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                rules: {
                    oldPwd: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                        { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
                    ],
                    newPwd: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
                    ],
                    confirmPwd: [
                        { validator: validateConfirmPwd, trigger: 'blur' }
                    ]
                },
                postForm: {
                    oldPwd: '',
                    newPwd: '',
                    confirmPwd: ''
                }
            }
        },
        methods: {
            onSubmit() {
                const that = this;
                this.$refs.postForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        changePwd(that.postForm).then(response => {
                            if (response.code === 0) {
                                that.$notify({
                                    title: '成功',
                                    message: '更新成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                that.logout();
                            } else {
                                that.$message({
                                    title: '失败',
                                    message: '原因:' + response.msg,
                                    type: 'error',
                                    duration: 3000
                                });
                            }
                            that.loading = false;
                        }).catch(err => {
                            that.$message({
                                title: '失败',
                                message: '原因:' + err.msg ? err.msg : err,
                                type: 'error',
                                duration: 3000
                            });
                            that.loading = false;
                        });
                    }
                });
            },
            logout() {
                this.$store.dispatch('LogOut').then(() => {
                    location.reload();  // 为了重新实例化vue-router对象 避免bug
                });
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>